<template>
  <div class="conversation-tools">
    <component :is="currentPage"></component>
    <!-- tab 显示 -->
    <!-- <div class="tools-content">
      <FastReply v-if="currentPage === 'FriendCircle'" />
      <FriendCircle />
      <LabelRemark />
      <ChatRoomManager />
    </div> -->
  </div>
</template>

<script>
import bus from '@/utils/bus'
import { mapGetters } from 'vuex'

import FastReply from './FastReply'
const FriendCircle = () => import(/* webpackChunkName: "conversation" */ './FriendCircle.vue')
const LabelRemark = () => import(/* webpackChunkName: "conversation" */ './LabelRemark.vue')
const ChatRoomManager = () => import(/* webpackChunkName: "conversation" */ './ChatRoomManager.vue')

export default {
  components: {
    FastReply,
    LabelRemark,
    FriendCircle,
    ChatRoomManager
  },
  data() {
    return {
      currentPage: 'FastReply'
    }
  },
  computed: {
    ...mapGetters({
      currentWeChatId: 'conversation/currentWeChatId',
      currentFriendId: 'conversation/currentFriendId'
    })
  },
  watch: {
    currentWeChatId() {
      this.resetPage()
    },
    currentFriendId() {
      this.resetPage()
    }
  },
  mounted() {
    bus.$on('toggleAsideRightPage', (page) => {
      if (this.currentPage === page) {
        this.resetPage()
      } else {
        this.currentPage = page
      }
    })
  },
  methods: {
    // 返回快捷回复页面
    resetPage() {
      this.currentPage = 'FastReply'
    }
  }
}
</script>

<style lang="scss" scoped>
.conversation-tools {
  width: 300px;
  height: 100%;
  min-width: 300px;
  background-color: #ffffff;
  overflow: hidden;
}
</style>
